<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
<link rel="stylesheet" type="text/css" href="../CSS/CSS.css"></head>
<body>
<p>代码作用说明</p>
<p>　　form标签是表单标签，主要作用是为了收集信息，是一个信息数据提交到后台的重要标签</p>
<hr/>
<p>　　表单标签有多个表单控件以及控件属性</p>
<p>　　form的属性标签action：将表单信息提交给服务地址</p>
<p>　　method标签：指表单的提交方式</p>
<p>　　　get属性：为默认的提交方式，运行效率比post更快，比如搜索引擎</p>
<p>　　　post属性：虽然运行比get慢，但是数据保密性更高</p>
<p>　　input标签：规定用户可输入数据的输入字段，根据不同的type属性，输入字段的多种形态</p>
<p>　　　type属性：text文本框，password密码框，radio单选框，file文件控件，checkbox复选框，submit提交，reset重置</p>
<p>　　　select下拉选择框：option选项标签</p>
<p>　　　textarea富文本框标签</p>

<hr/>
<p>　　　text文本框：输入文字</p>
<p>代码示例：&lt;form&gt;&lt;input type="text"/&gt;&lt;/form&gt;</p>
<p>代码效果：<form><input type="text"/></form></p>
<p>补充：1.文本框中可以用value属性，可以让文本框出现文字提示</p>
<p>　　　2.size属性可以控制文本框的长度，但是建议用样式控制</p>
<p>　　　3.maxlength：设置允许输入的最大长度</p>
<p>　　　4.disabled='disabled'禁用</p>
<p>　　　5.readonly:只读</p>
<p>　　　以上的部分属性不仅仅适用于文本框</p>
<hr/>
<p>　　　password密码框：输入密码，输入的文字呈*状或·状</p>
<p>代码示例：&lt;form&gt;&lt;input type="password"/&gt;&lt;/form&gt;</p>
<p>代码效果：<form><input type="password"/></form></p>
<hr/>
<p>　　　radio：单选框：只能选择一个</p>
<p>代码示例：<pre>&lt;form&gt;
    &lt;input name="sex" type="radio"/&gt;男
    &lt;input name="sex" type="radio"/&gt;女
    &lt;/form&gt;</pre></p>
<p>代码效果：<form><input name="sex" type="radio"/>男
    <input name="sex" type="radio"/>女</form></p>
<p>补充：name的作用是命名分组按钮，同一组的按钮必须是同一个名字(复选框也一样)</p>
<p>　　　使用label关联标签，可以让鼠标点击选择的范围关联到文字；如：<form><label><input name="sex" type="radio"/>女</label></form></p>
<hr/>
<p>　　　file文件控件：可以上传图片，如：头像</p>
<p>代码示例：&lt;form&gt;&lt;input type="file"/&gt;&lt;/form&gt;</p>
<p>代码效果：<form><input type="file"/></form></p>
<hr/>
<p>　　　checkbox：复选框：可以选择多个</p>
<p>代码示例：<pre>&lt;form&gt;
    &lt;input name="lovely" type="checkbox"/&gt;音乐
    &lt;input name="lovely" type="checkbox"/&gt;舞蹈
    &lt;input name="lovely" type="checkbox"/&gt;旅行
    &lt;/form&gt;</pre></p>
<p>代码效果：<form><input name="lovely" type="checkbox"/>音乐
    <input name="lovely" type="checkbox"/>舞蹈
    <input name="lovely" type="checkbox" />旅行</form></p>
<hr/>
<p>　　　submit：提交按钮：文件的提交</p>
<p>代码示例：&lt;form&gt;&lt;input type="submit"/&gt;&lt;/form&gt;</p>
<p>代码效果：<form><input type="submit"/></form></p>
<p>补充：这个按钮是把数据提交给后台的，这里只是示例一下</p>
<p>　　　按钮的名字用value属性更改：<form><input type="submit"value="注册"/></form></p>
<hr/>
<p>　　　reset:重置按钮：回到表单原本的样子</p>
<p>代码示例：&lt;form&gt;&lt;input type="reset"/&gt;&lt;/form&gt;</p>
<p>代码效果：<form><input type='reset'/></form></p>
<hr/>
<p>　　　select:下拉文本框标签：文本框不是输入格式，而是下拉选择一项，还需要一个标签：option</p>
<p>代码示例：<pre>&lt;form&gt;
    &lt;select&gt;
        &lt;option&gt;男&lt;/option&gt;
        &lt;option&gt;女&lt;/option&gt;
    &lt;/select&gt;
&lt;/form&gt;</pre></p>
<p>代码效果：</p><form>
    <select>
        <option>男</option>
        <option>女</option>
    </select>
</form>
<p>补充：在有许多选项的时候，可以用size控制显示几个选项：如：
<form>
    <select size="3">
        <option>男</option>
        <option>女</option>
        <option>性别不详</option>
        <option >人妖</option>
    </select>
</form></p>
<p>　　　multiple：select的属性标签，下拉列表框的多选</p>
<hr/>
<p>　　　textarea：富文本框</p>
<p>代码示例：&lt;form&gt;&lt;textarea&gt;&lt;textarea&gt;&lt;/form&gt;</p>
<p>代码效果：<form><textarea></textarea></form></p>
<p>补充：富文本框中打字可以任意换行，可以用cols,rows来控制文本框的宽高，但是更建议使用样式控制</p>
<hr/>
<p>补充内容：</p>
<p>　　　按钮的用法：</p>
<p><pre>　　　　可自动提交：1.&lt;input type="submit" value="注册"/&gt;from中的按钮，直接提交
                     2.&lt;button&gt;注册&lt;/button&gt;按钮标签，直接提交
                     3.&lt;input type="image"src=""/&gt;from中，将按钮改成图片形式直接提交
       不可自动提交：
                    1.&lt;button type="button"&gt;注册&lt;/button&gt;
                    2.&lt;input type="button" value="注册"/&gt;</pre></p>
<p>　　　method属性->关于表单提交：get属性提交有参数列表，post无参列表，get和post提交的数据在http协议里面存在的数据包的位置不同，form中的控件数据要提交给后台，控件属性必须要用name命名</p>
</body>
</html>